import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { Star, ChevronRight, Clock, Award } from 'lucide-react';
import { ProductCard } from '../../components/ProductCard';
import { setPageTitle } from '../../lib/utils';

export function WellnessDetail() {
  const {
    productId
  } = useParams();
  const [activeTab, setActiveTab] = useState('description');
  const [activeImage, setActiveImage] = useState(0);
  // Mock wellness products data
  const products = [{
    id: 'wl-001',
    title: 'Lavender Sleep Mist',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.8,
    reviewCount: 92,
    price: 28.0,
    category: 'Wellness',
    benefits: ['Promotes relaxation', 'Improves sleep quality', 'Calms the mind'],
    description: 'This calming lavender sleep mist creates a peaceful environment to help you unwind and prepare for restful sleep. Formulated with pure lavender essential oil and chamomile extract, it soothes the senses and promotes deep relaxation when sprayed on pillows and linens.',
    ingredients: 'Purified Water, Lavender Essential Oil, Chamomile Extract, Glycerin, Witch Hazel, Aloe Vera, Vegetable Glycerin, Natural Emulsifier, Potassium Sorbate, Citric Acid',
    howToUse: 'Shake gently before use. Spray lightly onto pillows, linens, or throughout your room about 15 minutes before bedtime. Can also be used throughout the day to create a calming atmosphere. Avoid spraying directly on face or skin.'
  }, {
    id: 'wl-002',
    title: 'Relaxation Tea Blend',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1563911892437-1feda0179e1b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1563911892437-1feda0179e1b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.7,
    reviewCount: 64,
    price: 24.0,
    category: 'Wellness',
    benefits: ['Reduces stress', 'Promotes relaxation', 'Supports digestive health'],
    description: 'This soothing herbal blend combines chamomile, lavender, and lemon balm to help calm the mind and ease tension. Perfect for your evening ritual or any time you need to unwind, this caffeine-free tea promotes relaxation and overall wellbeing.',
    ingredients: 'Organic Chamomile Flowers, Organic Lavender Buds, Organic Lemon Balm, Organic Passionflower, Organic Linden Flowers, Organic Rose Petals',
    howToUse: 'Steep 1 teaspoon in 8oz of hot water (just below boiling) for 5-7 minutes. Enjoy 1-2 cups daily, ideally in the evening as part of your wind-down ritual. Can be sweetened with honey if desired.'
  }, {
    id: 'wl-003',
    title: 'Meditation Cushion',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1524863479829-916d8e77f114?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.9,
    reviewCount: 37,
    price: 58.0,
    category: 'Wellness',
    benefits: ['Improves posture', 'Enhances meditation practice', 'Provides comfort during sitting'],
    description: 'This ergonomically designed meditation cushion provides optimal support for extended meditation sessions. Filled with organic buckwheat hulls that conform to your body, it promotes proper spinal alignment and reduces discomfort during practice.',
    ingredients: 'Organic Buckwheat Hull Fill, 100% Cotton Cover (GOTS Certified), Natural Dyes, Eco-Friendly Zipper',
    howToUse: 'Place cushion on a flat surface. Sit cross-legged or in your preferred meditation position with the cushion supporting your sitting bones. Adjust height by adding or removing buckwheat hulls through the inner zippered compartment.'
  }, {
    id: 'wl-004',
    title: 'Aromatherapy Diffuser',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1604948501466-4e9c339b9c24?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.6,
    reviewCount: 83,
    price: 68.0,
    originalPrice: 78.0,
    category: 'Wellness',
    benefits: ['Creates calming atmosphere', 'Disperses essential oils evenly', 'Operates quietly'],
    description: 'Transform any space into a serene sanctuary with this ultrasonic aromatherapy diffuser. Using advanced ultrasonic technology, it disperses a fine mist of essential oils while maintaining their therapeutic properties. Features LED lighting and timer settings.',
    ingredients: 'BPA-Free Plastic Housing, Ultrasonic Plate (Ceramic), Stainless Steel Components, LED Light System',
    howToUse: 'Fill water tank with clean water up to the max line. Add 3-5 drops of your favorite essential oil. Press power button to start. Use timer settings (1H, 3H, 6H) or continuous mode. Clean weekly with mild soap and water.'
  }, {
    id: 'wl-005',
    title: 'Jade Facial Roller',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1619451334792-150d17d62455?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1596755389378-c31d21fd1273?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.7,
    reviewCount: 56,
    price: 32.0,
    category: 'Wellness',
    benefits: ['Promotes lymphatic drainage', 'Reduces puffiness', 'Improves circulation'],
    description: 'Crafted from authentic jade stone, this facial roller promotes lymphatic drainage and helps reduce puffiness while improving circulation. The cooling properties of jade provide a soothing massage that enhances your skincare routine and promotes relaxation.',
    ingredients: '100% Natural Jade Stone, Stainless Steel Frame, Rose Gold Plating (Nickel-Free)',
    howToUse: 'Use on clean skin with or without serums. Roll upward and outward from center of face. Use large roller for cheeks, forehead, and neck; small roller for under eyes and nose area. Clean with gentle soap after each use. Store in refrigerator for extra cooling effect.'
  }, {
    id: 'wl-006',
    title: 'Silk Sleep Mask',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1618517047922-d18a5a36c109?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1618517047922-d18a5a36c109?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.8,
    reviewCount: 42,
    price: 38.0,
    category: 'Wellness',
    benefits: ['Blocks out light completely', 'Gentle on skin and hair', 'Adjustable fit'],
    description: 'Made from pure mulberry silk, this luxurious sleep mask provides complete darkness for deeper, more restorative sleep. The smooth silk surface is gentle on delicate skin around the eyes and won\'t tangle or damage hair while you sleep.',
    ingredients: '100% Mulberry Silk (Grade 6A), Adjustable Elastic Band (Silk-Covered), Natural Silk Fill',
    howToUse: 'Adjust elastic band for comfortable fit that blocks light without pressure. Place gently over eyes before sleep. Hand wash with cold water and mild detergent. Air dry away from direct sunlight. Store in provided silk pouch.'
  }];
  // Reviews data
  const reviews = [{
    id: 1,
    author: 'Olivia R.',
    rating: 5,
    date: '2023-06-05',
    title: 'Finally sleeping through the night',
    content: "I've struggled with falling asleep for years and this sleep mist has been a game changer. The lavender scent is calming without being overwhelming, and I've noticed I fall asleep faster and stay asleep longer. I will definitely repurchase!",
    with: '',
    for: '',
    this: '',
    helpfulCount: 38
  }, {
    id: 2,
    author: 'David M.',
    rating: 4,
    date: '2023-05-18',
    title: 'Great product, bottle could be better',
    content: "The sleep mist itself is wonderful and has become an essential part of my nighttime routine. The only reason I'm giving it 4 stars instead of 5 is that the spray nozzle sometimes gets stuck. Otherwise, the product is perfect.",
    with: '',
    for: '',
    this: '',
    helpfulCount: 21
  }, {
    id: 3,
    author: 'Sophia L.',
    rating: 5,
    date: '2023-04-30',
    title: 'Perfect for travel',
    content: 'I always have trouble sleeping in hotel rooms, so I bought this to take on my last business trip. It made such a difference! The familiar scent helped me relax in an unfamiliar environment. The bottle size is also perfect for travel.',
    helpfulCount: 29
  }];
  // Related products
  const relatedProducts = [{
    id: 'wl-003',
    title: 'Meditation Cushion',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.9,
    reviewCount: 37,
    price: 58.0,
    category: 'Wellness'
  }, {
    id: 'wl-004',
    title: 'Aromatherapy Diffuser',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.6,
    reviewCount: 83,
    price: 68.0,
    originalPrice: 78.0,
    category: 'Wellness'
  }, {
    id: 'wl-005',
    title: 'Jade Facial Roller',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.7,
    reviewCount: 56,
    price: 32.0,
    category: 'Wellness'
  }, {
    id: 'wl-006',
    title: 'Silk Sleep Mask',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1618517047922-d18a5a36c109?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.8,
    reviewCount: 42,
    price: 38.0,
    category: 'Wellness'
  }];
  
  // Find the current product
  const product = products.find(p => p.id === productId);

  useEffect(() => {
    if (product) {
      setPageTitle(product.title);
    }
  }, [product]);

  if (!product) {
    return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12 text-center">
        <h1 className="font-serif text-2xl mb-4">Product Not Found</h1>
        <p className="mb-6">
          The product you're looking for doesn't exist or has been removed.
        </p>
        <Link to="/wellness" className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
          Back to Wellness
        </Link>
      </div>;
  }

  return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12">
      {/* Breadcrumbs */}
      <div className="flex items-center text-sm mb-8">
        <Link to="/" className="text-gray-500 hover:text-[#4a6b60]">
          Home
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <Link to="/wellness" className="text-gray-500 hover:text-[#4a6b60]">
          Wellness
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <span className="text-[#4a4a4a]">{product.title}</span>
      </div>
      {/* Product Details */}
      <div className="flex flex-col lg:flex-row gap-12 mb-16">
        {/* Product Images */}
        <div className="lg:w-1/2">
          <div className="bg-white rounded-lg overflow-hidden mb-4">
            <img src={product.images[activeImage]} alt={product.title} className="w-full h-[500px] object-cover" />
          </div>
          <div className="flex gap-4">
            {product.images.map((image, index) => <button key={index} onClick={() => setActiveImage(index)} className={`w-20 h-20 rounded-md overflow-hidden border-2 ${index === activeImage ? 'border-[#4a6b60]' : 'border-transparent'}`}>
                <img src={image} alt={`${product.title} view ${index + 1}`} className="w-full h-full object-cover" />
              </button>)}
          </div>
        </div>
        {/* Product Info */}
        <div className="lg:w-1/2">
          <div className="text-xs uppercase tracking-wider text-[#4a6b60] font-medium mb-1">
            {product.brand}
          </div>
          <h1 className="font-serif text-3xl mb-4">{product.title}</h1>
          <div className="flex items-center mb-4">
            <div className="flex items-center">
              {[...Array(5)].map((_, i) => <Star key={i} size={16} className={`${i < Math.round(product.rating) ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
            </div>
            <span className="text-sm ml-2">
              {product.rating} ({product.reviewCount} reviews)
            </span>
          </div>
          <div className="text-xl font-medium mb-6">
            ${product.price.toFixed(2)}
          </div>
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Description
            </h3>
            <p className="text-sm leading-relaxed">{product.description}</p>
          </div>
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Benefits
            </h3>
            <ul className="space-y-2">
              {product.benefits.map((benefit, index) => <li key={index} className="flex items-start">
                  <Award size={16} className="text-[#4a6b60] mt-0.5 mr-2 flex-shrink-0" />
                  <span className="text-sm">{benefit}</span>
                </li>)}
            </ul>
          </div>
          <div className="bg-[#f3f0eb] p-4 rounded-lg mb-6">
            <div className="flex items-center">
              <Clock size={18} className="text-[#4a6b60] mr-3" />
              <div>
                <h3 className="font-medium text-sm">
                  Part of The Evening Renewal Ritual
                </h3>
                <p className="text-xs mt-1">
                  View the complete ritual for better sleep and relaxation
                </p>
              </div>
              <Link to="/the-ritual" className="ml-auto text-xs font-medium text-[#4a6b60] hover:underline">
                View Ritual
              </Link>
            </div>
          </div>
        </div>
      </div>
      {/* Product Tabs */}
      <div className="mb-16">
        <div className="border-b border-[#e8e5e0] mb-8">
          <div className="flex">
            <button onClick={() => setActiveTab('description')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'description' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Details
            </button>
            <button onClick={() => setActiveTab('ingredients')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'ingredients' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Ingredients
            </button>
            <button onClick={() => setActiveTab('how-to-use')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'how-to-use' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              How to Use
            </button>
            <button onClick={() => setActiveTab('reviews')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'reviews' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Reviews ({product.reviewCount})
            </button>
          </div>
        </div>
        <div className="bg-white p-8 rounded-lg">
          {activeTab === 'description' && <div>
              <p className="leading-relaxed mb-4">{product.description}</p>
              <p className="leading-relaxed">
                Our wellness products are formulated with natural, high-quality
                ingredients to support your holistic wellbeing. We believe in
                the power of mindful rituals to enhance both physical and mental
                health.
              </p>
            </div>}
          {activeTab === 'ingredients' && <div>
              <p className="leading-relaxed mb-4">Full Ingredients List:</p>
              <p className="leading-relaxed">{product.ingredients}</p>
            </div>}
          {activeTab === 'how-to-use' && <div>
              <p className="leading-relaxed">{product.howToUse}</p>
            </div>}
          {activeTab === 'reviews' && <div>
              <div className="flex items-center justify-between mb-8">
                <div>
                  <div className="flex items-center">
                    {[...Array(5)].map((_, i) => <Star key={i} size={20} className={`${i < Math.round(product.rating) ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
                    <span className="text-lg ml-2 font-medium">
                      {product.rating} out of 5
                    </span>
                  </div>
                  <p className="text-sm text-gray-500 mt-1">
                    Based on {product.reviewCount} reviews
                  </p>
                </div>
                <button className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
                  Write a Review
                </button>
              </div>
              <div className="space-y-8">
                {reviews.map(review => <div key={review.id} className="border-b border-[#e8e5e0] pb-8">
                    <div className="flex justify-between mb-2">
                      <h3 className="font-medium">{review.author}</h3>
                      <span className="text-sm text-gray-500">
                        {review.date}
                      </span>
                    </div>
                    <div className="flex items-center mb-2">
                      {[...Array(5)].map((_, i) => <Star key={i} size={14} className={`${i < review.rating ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
                    </div>
                    <h4 className="font-medium mb-2">{review.title}</h4>
                    <p className="text-sm leading-relaxed mb-4">
                      {review.content}
                    </p>
                    <button className="text-sm text-[#4a6b60] hover:underline">
                      Helpful ({review.helpfulCount})
                    </button>
                  </div>)}
              </div>
            </div>}
        </div>
      </div>
      {/* Related Products */}
      <div>
        <h2 className="font-serif text-2xl mb-8">You May Also Like</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {relatedProducts.map(relatedProduct => <ProductCard key={relatedProduct.id} id={relatedProduct.id} title={relatedProduct.title} brand={relatedProduct.brand} image={relatedProduct.image} rating={relatedProduct.rating} reviewCount={relatedProduct.reviewCount} price={relatedProduct.price} originalPrice={relatedProduct.originalPrice} category={relatedProduct.category} />)}
        </div>
      </div>
    </div>;
}